<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/transTemplateList'}">物流</el-breadcrumb-item>
        <el-breadcrumb-item>修改运费模板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--start content-->
    <div class="content" id="content" ref="pageContent">
      <el-form style="margin-top: 10px" ref="transForm" :model="transFormData" label-width="80px">
        <el-row>
          <el-col :span="10">
            <el-form-item label="模板名称">
              <el-input v-model="transFormData.freightName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="商品地址">
              <el-cascader
                class="selectWidth"
                :options="vue_area_valueArr"
                @change="vue_areaChange"
                v-model="transFormData.freightShipAddress"
                :clearable="true"
                :change-on-select="true"
                :props="vue_area_props">
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="发货时间" prop="freightDeliveryLimit">
              <el-select class="selectWidth" v-model="transFormData.freightDeliveryLimit" placeholder="请选择发货时间">
                <el-option v-for="item in vue_deliveryTime" :key="item.ddlistCode" :label="item.ddlistName" :value="item.ddlistCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <span class="trans-tip">承诺买家付款后该时间内录入物流信息并发货，以物流公司收单信息为准。</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="是否包邮">
              <label><input type="radio" @change="radio_buyer_btn" v-model="transFormData.freightFreepost" value="0"/>买家承担运费</label>
              <label><input type="radio" @change="radio_seller_btn" v-model="transFormData.freightFreepost" value="1"/>卖家承担运费(包邮)</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="计价方式">
          <label><input type="radio" @change="radio_freightPricingType_btn" v-model="transFormData.freightPricingType" value="0"/>按件数</label>
          <label><input type="radio" @change="radio_freightPricingType_btn" v-model="transFormData.freightPricingType" value="1"/>按重量</label>
          <label><input type="radio" @change="radio_freightPricingType_btn" v-model="transFormData.freightPricingType" value="2"/>按体积</label>
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="运送方式" prop="freightShipType">
              <el-select class="selectWidth" v-model="transFormData.freightShipType" placeholder="请选择运送方式">
                <el-option v-for="item in vue_freightShipType" :key="item.ddlistKey" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <span class="trans-tip">除指定地区外，其余地区的运费采用“默认运费”</span>
          </el-col>
        </el-row>
      </el-form>
      <div class="trans-box" v-show="tableShow">
        <table  class="trans-table"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <th></th>
            <th></th>
            <th>计费依据</th>
            <th>
              <span>起算量</span>
              <span class="notEnough">(不足起算量按起算量计)</span>
            </th>
            <th>运费</th>
            <th>续量</th>
            <th>续运费</th>
          </tr>
          <tr ref="trDom" v-for="(item,index) in transFormData.freightRuleListStr">
            <td><span>{{index+1}}</span></td>
            <td>
                <span class="addOrReduce">
                  <i @click="addTr">+</i>
                  <i @click="reduceTr(item,index)">-</i>
                </span>
            </td>
            <td>
              <span class="transColor" @click="areaName_btn(item,index)">{{item.freightRuleName}}</span>
            </td>
            <td>
              <el-input v-model="startNumber" @blur="blur_startNumber_btn(item,index)" v-if="startNumberShow && vue_index === index"></el-input>
              <div @click.stop="startNumber_btn(item,index)" v-else>
                <span v-if="vue_freightPricingType == '按件数'">{{item.freightRuleNum}}件</span>
                <span v-if="vue_freightPricingType == '按重量'">{{item.freightRuleNum}}kg</span>
                <span v-if="vue_freightPricingType == '按体积'">{{item.freightRuleNum}}m³</span>
              </div>
            </td>
            <td>
              <el-input v-model="startMoney"  @blur="blur_startMoney_btn(item,index)" v-if="startMoneyShow && vue_index === index"></el-input>
              <span @click.stop="startMoney_btn(item,index)" v-else>¥{{Public.formatMoney(item.freightRuleMoney,2)}}</span>
            </td>
            <td>
              <el-input v-model="continueNumber"  @blur="blur_continueNumber_btn(item,index)" v-if="continueNumberShow && vue_index === index"></el-input>
              <div @click.stop="continueNumber_btn(item,index)" v-else>
                <span v-if="vue_freightPricingType == '按件数'">每{{item.freightRuleCnum}}件</span>
                <span v-if="vue_freightPricingType == '按重量'">每{{item.freightRuleCnum}}kg</span>
                <span v-if="vue_freightPricingType == '按体积'">每{{item.freightRuleCnum}}m³</span>
              </div>
            </td>
            <td>
              <el-input v-model="continueMoney"  @blur="blur_continueMoney_btn(item,index)" v-if="continueMoneyShow && vue_index === index"></el-input>
              <span @click.stop="continueMoney_btn(item,index)" v-else>¥{{Public.formatMoney(item.freightRuleCmoney,2)}}</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="queren">
        <el-button :disabled="clickBtn" type="primary" @click="saveNewTrans_btn">保存</el-button>
        <el-button @click="$router.push({path:'/transTemplateList'})">取消</el-button>
      </div>
      <area-dialog id="areaDialog" :vue_areaLeftData="queryInfoTreeData" :show_right_select="treeData_arr" :return_left_data="returnLeft" v-show="areaDialogShow" @listenToChildRightData="dataFormChildR_btn" @listenToChildCanle="closeAreaDialog"></area-dialog>
    </div>

  </section>
</template>
<script>
  import * as companyMsgDatas from '../../../assets/data/areaDate';
  import areaDialog from '../../../components/dialog/areaDialog'
  import * as areaData from '../../../assets/data/areaDate';
  export default {
    components:{areaDialog},
    data() {
      return {
        areaDialogShow:false,   //地区显示、隐藏
        vue_index:"",   //存储index
        startNumberShow:"",    //（起算量）显示隐藏
        startMoneyShow:"",     //（起算运费）显示隐藏
        continueNumberShow:"",   //（续件量）显示隐藏
        continueMoneyShow:"",   //（续件运费）显示隐藏
        startNumber:"",    //（起算量）输入
        startMoney:0,     //（起算运费）输入
        continueNumber:"",   //（续件量）输入
        continueMoney:0,   //（续件运费）输入
        //商品地址组件的属性
        vue_area_props:{
          value: 'treeCode',
          children: 'children',
          label: 'treeName',
        },
        vue_oldVal:"",    //存储计价方式的（旧值）
        vue_freightPricingType:"按件数",     //table中（因计费方式）的（切换）而显示对应项
        tableShow:true,  //table的显示隐藏
        vue_area_valueArr:[],  //商品地址data
        clickBtn:false,     //（点击）保存按钮后禁用
        vue_deliveryTime:[],   //保存发货时间列表
        vue_freightShipType:[],   //保存运输方式列表
        //新增（form）表单数据
        transFormData:{
          freightName:"",     //模板名称
          freightShipAddress :[],  //商品地址
          freightDeliveryLimit :"",  //发货时间
          freightFreepost:0,    //是否包邮
          freightPricingType: 0,   //计价方式（默认按件数）
          freightShipType:"",    //运送方式
          freightRuleListStr:[     //table表格的数据
            {
              freightRuleName:"通用",   //计费依据
              freightRuleNum:"1",   //起算量
              freightRuleMoney: 5,   //运费
              freightRuleCnum:"1",  //续件
              freightRuleCmoney: 1,   //续运费
              freightRuleAreaset:"00",    //treeCode
            },
          ]
        },
        treeData_arr:[],    //存储获取的右边树数据
        tree_name:"",    //存储获取的右（省级名称）（临时存储）
        treeChildren_name:"",    //存储获取的右（市级名称）（临时存储）
        treeChildrenShow:false,   //判断省级节点下面的市是否被选中
        noneSelect:false,   //没有选择任何地区的情况
        ProvincialToArr:"",    //获取省级字符串
        cityArr:"",    //获取市级字符串
        freightRuleAreaset:"", //treeCode
        returnLeft:[],    //当点击取消时
        queryInfoTreeData:JSON.parse(JSON.stringify(areaData.areaDataList)),    //存储初始化的子组件左边树
        queryInfoString:"",    //存储初始化页面时获取计费依据的字符串
      }
    },

    watch:{
      //监视计费方式的（旧值）
      "transFormData.freightPricingType":function(val,oldVal){
        this.vue_oldVal = oldVal;
      },
    },

    methods: {

      //初始化页面数据
      queryInfo(){
        this.axios({
          method:"GET",
          url:"/v3/trans/freights/" + localStorage.getItem("freightCode"),
          data:{},
        }).then((res) =>{
          this.transFormData = res.data;
          this.transFormData.freightShipAddress = JSON.parse(res.data.freightShipAddress);
          this.transFormData.freightRuleListStr = JSON.parse(JSON.stringify(res.data.transFreightRuleVoList));
          this.transFormData.freightRuleListStr.forEach((itemA,indexA,arrA) =>{
            if(indexA >0){
              this.queryInfoString += itemA.freightRuleName;
            }
          });
          this.queryInfoString = this.queryInfoString.substring(0,this.queryInfoString.length-1).split(";");
          this.queryInfoString.forEach((itemA,indexA,arrA) =>{
            if(itemA.indexOf("(") > 0){
              itemA =  itemA.split("(");
              itemA[1] = itemA[1].substring(0,itemA[1].length-1).split(",");
              this.queryInfoTreeData.forEach((itemB,indexB,arrB) =>{
                if(itemA[0] == itemB.treeName){
                  itemA[1].forEach((itemE,indexE,arrE) =>{
                    itemB.children.forEach((itemF,indexF,arrF) =>{
                      if(itemE == itemF.treeName){
                        itemF.checked1 = true;
                        itemF.dealWith = false;
                      }
                    })
                  })
                }
              })
            }else{
              this.queryInfoTreeData.forEach((itemC,indexC,arrC) =>{
                  if(itemC.treeName == itemA){
                    itemC.checked1 = true;
                    itemC.dealWith = false;
                    itemC.children.forEach((itemD,indexD,arrD) =>{
                      itemD.checked1 = true;
                      itemD.dealWith = false;
                    })
                  }
              })
            }

          })
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },

      //关闭弹出框
      closeAreaDialog(){
        this.areaDialogShow = false;
      },

      //（点击）减号按钮
      reduceTr(item,index){
        if(index == 0){         // 1、判断删除的是否是第一条，若是，禁止删除；若不是，向下执行。
          this.Public.openError(this,'通用模板不能删除');
          return false;
        }
        const h = this.$createElement;     //  2、弹出框（是否删除该条数据）
        this.$msgbox({
          title: '提示',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '确定删除吗？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {             // 3、选择删除
            this.transFormData.freightRuleListStr.forEach((item1,index1,arr1) =>{
              if(index == index1){
                if( this.transFormData.freightRuleListStr[index].freightRuleName == '请选择地区'){     // 4、判断当前运费依据的显示内容，若是‘请选择地区’，直接删除；若不是，向下执行
                  this.transFormData.freightRuleListStr.splice(index,1);
                }else{
                  this.returnLeft = JSON.parse(JSON.stringify(areaData.areaDataList));   //  5、初始化this.returnLeft，向下执行得到本次删除的数据，用于和子组件左边数据作比较，并还原左边数据
                  this.vue_index = index;
                  this.ProvincialToArr = this.transFormData.freightRuleListStr[this.vue_index].freightRuleName;
                  this.ProvincialToArr = this.ProvincialToArr.substring(0,this.ProvincialToArr.length-1).split(";");
                  this.ProvincialToArr.forEach((itemA,indexA,arrA) =>{
                    if(itemA.indexOf("(") > 0){
                      itemA =  itemA.split("(");
                      itemA[1] = itemA[1].substring(0,itemA[1].length-1).split(",");
                      this.returnLeft.forEach((itemD,indexD,arrD) =>{
                        if(itemA[0] == itemD.treeName){
                          itemD.checked1 = true;
                          itemA[1].forEach((itemE,indexE,arrE) =>{
                            itemD.children.forEach((itemF,indexF,arrF) =>{
                              if(itemE == itemF.treeName){
                                itemF.checked1 = true;
                              }
                            })
                          })
                        }
                      })
                    }else{
                      this.returnLeft.forEach((itemB,indexB,arrB) =>{
                        if(itemA == itemB.treeName){
                          itemB.checked1 = true;
                          itemB.children.forEach((itemC,indexC,arrC) =>{
                            itemC.checked1 = true;
                          })
                        }
                      })
                    }
                  })
                }
              }
            });
            this.transFormData.freightRuleListStr.splice(index,1);      //  6、删除该条数
          }
        }).catch(() => {

        });
      },

      //获取弹窗组件的右边tree值（处理展示）
      dataFormChildR_btn(data){
        this.treeData_arr = JSON.parse(JSON.stringify(data));      //获取的右数据格式化后赋给this.treeData_arr保存
        this.treeData_arr.forEach((item,index,arr) =>{
          if(item.checked1){       //循环判断是否有（被选中）的（省级）
            this.treeChildrenShow =  item.children.every(itemG =>{
              return itemG.checked1;     //判断省级节点下面的市是否被选中
            });
            if(this.treeChildrenShow){
              this.tree_name += item.treeName +";";     //若省级节点下面的市（全部）被选中，拼接省级名称
              this.freightRuleAreaset +=  item.treeCode + ",";   //treeCode拼接
            }else{
              this.freightRuleAreaset += item.treeCode + "," ;  //treeCode拼接
              item.children.forEach((itemA,indexA,arrA) =>{
                if(itemA.checked1){
                  this.treeChildren_name += itemA.treeName + ",";    //若省级节点下面的市（部分）被选中，拼接省后面被选中的市级
                  this.freightRuleAreaset +=  itemA.treeCode + ",";    //treeCode拼接
                }
              });
              this.treeChildren_name = this.treeChildren_name.substring(0,this.treeChildren_name.length-1);   //切割去除拼接时最后一个逗号
              this.tree_name += item.treeName + "(" + this.treeChildren_name + ")" + ";";    //拼接省、市名称
              this.treeChildren_name = "";
            }
          }
        });
        this.noneSelect = this.treeData_arr.every(itemG =>{     //判断是否点击了子组件的保存操作
          return !itemG.checked1;
        });
        if(this.noneSelect){        //若未点击子组件的保存操作，返回默认显示值
          this.tree_name = "请选择地区";
        }
        this.transFormData.freightRuleListStr[this.vue_index].freightRuleName = this.tree_name;       //把最终的值赋给form表格的freightRuleName字段
        this.transFormData.freightRuleListStr[this.vue_index].freightRuleAreaset = this.freightRuleAreaset.substring(0,this.freightRuleAreaset.length-1);       //把最终的值赋给form表格的freightRuleName字段
        this.areaDialogShow = false;     //关闭子组件
      },

      //（点击）计费依据弹出层
      areaName_btn(item,index){
        this.tree_name = "";
        this.freightRuleAreaset = "";
        this.treeChildren_name = "";
        if(item.freightRuleName == "通用"){
          this.Public.openError(this,"通用地区不可修改！");
        }else if(item.freightRuleName == "请选择地区"){
          this.treeData_arr = JSON.parse(JSON.stringify(areaData.areaDataList));   //初始化this.treeData_arr
          this.vue_index = index;
          this.areaDialogShow = true;
        }else{
          this.treeData_arr = JSON.parse(JSON.stringify(areaData.areaDataList));   //初始化this.treeData_arr
          this.vue_index = index;
          this.areaDialogShow = true;
          this.ProvincialToArr = this.transFormData.freightRuleListStr[this.vue_index].freightRuleName;
          this.ProvincialToArr = this.ProvincialToArr.substring(0,this.ProvincialToArr.length-1).split(";");
          this.ProvincialToArr.forEach((itemA,indexA,arrA) =>{
            if(itemA.indexOf("(") > 0){
              itemA =  itemA.split("(");
              itemA[1] = itemA[1].substring(0,itemA[1].length-1).split(",");
              this.treeData_arr.forEach((itemD,indexD,arrD) =>{
                if(itemA[0] == itemD.treeName){
                  itemD.checked1 = true;
                  itemA[1].forEach((itemE,indexE,arrE) =>{
                    itemD.children.forEach((itemF,indexF,arrF) =>{
                      if(itemE == itemF.treeName){
                        itemF.checked1 = true;
                      }
                    })
                  })
                }
              })
            }else{
              this.treeData_arr.forEach((itemB,indexB,arrB) =>{
                if(itemA == itemB.treeName){
                  itemB.checked1 = true;
                  itemB.children.forEach((itemC,indexC,arrC) =>{
                    itemC.checked1 = true;
                  })
                }
              })
            }

          })

        }
      },

      //（保存）按钮
      saveNewTrans_btn(){
        this.clickBtn = true;
        this.axios({
          method:"PUT",
          url:"/v3/trans/freights/" + localStorage.getItem("freightCode") + "/updateFreightAndFreightRule",
          data:{
            "freightName":this.transFormData.freightName,    //模板名称
            "freightShipAddress":JSON.stringify(this.transFormData.freightShipAddress),    //商品地址
            "freightDeliveryLimit":this.transFormData.freightDeliveryLimit,   //发货时间
            "freightFreepost":this.transFormData.freightFreepost,   //是否包邮
            "freightPricingType":this.transFormData.freightPricingType,   //计价方式
            "freightShipType":this.transFormData.freightShipType,    //运送方式
            "freightRuleListStr":JSON.stringify(this.transFormData.freightRuleListStr),   //运费规则
          },
        }).then((res) =>{
          this.clickBtn = false;
          this.$router.push({path:"/transTemplateList"})
          this.Public.openSuccess(this,"操作成功！")
        }).catch((err) =>{
          this.clickBtn = false;
          this.Public.openError(this,err.response.data)
        });
      },

      //续件运费（输入框）与（td显示）相互切换
      continueMoney_btn(item,index){
        this.vue_index = index;
        this.continueMoneyShow = true;
        this.startNumberShow = false;
        this.startMoneyShow = false;
        this.continueNumberShow = false;
        this.continueMoney = Number(this.transFormData.freightRuleListStr[index].freightRuleCmoney);
        setTimeout(()=>{
          this.$refs['trDom'][index].childNodes[12].childNodes["0"].childNodes["2"].select();
        },200)
      },

      //续件运费（输入框）失去焦点
      blur_continueMoney_btn(item,index){
        this.transFormData.freightRuleListStr[index].freightRuleCmoney = Number(this.continueMoney);
        this.continueMoneyShow = false;
      },

      //续件（输入框）与（td显示）相互切换
      continueNumber_btn(item,index){
        this.vue_index = index;
        this.continueNumberShow = true;
        this.continueMoneyShow = false;
        this.startNumberShow = false;
        this.startMoneyShow = false;
        this.continueNumber = this.transFormData.freightRuleListStr[index].freightRuleCnum;
        setTimeout(()=>{
          this.$refs['trDom'][index].childNodes[10].childNodes["0"].childNodes["2"].select();
        },200)
      },

      //续件（输入框）失去焦点
      blur_continueNumber_btn(item,index){
        if(this.continueNumber <= 0 || this.continueNumber > 999999){
          this.continueNumber = 1;
          this.Public.openError(this,'请输入1-999999之间的正整数')
        }
        this.transFormData.freightRuleListStr[index].freightRuleCnum =  this.continueNumber;
        this.continueNumberShow = false;
      },

      //运费（输入框）与（td显示）相互切换
      startMoney_btn(item,index){
        this.vue_index = index;
        this.startMoneyShow = true;
        this.continueNumberShow = false;
        this.continueMoneyShow = false;
        this.startNumberShow = false;
        this.startMoney = Number(this.transFormData.freightRuleListStr[index].freightRuleMoney);
        setTimeout(()=>{
          this.$refs['trDom'][index].childNodes[8].childNodes["0"].childNodes["2"].select();
        },200)
      },

      //运费（输入框）失去焦点
      blur_startMoney_btn(item,index){
        this.transFormData.freightRuleListStr[index].freightRuleMoney = Number(this.startMoney);
        this.startMoneyShow = false;
      },

      //起算量（输入框）与（td显示）相互切换
      startNumber_btn(item,index){
        this.vue_index = index;
        this.startNumberShow = true;
        this.startMoneyShow = false;
        this.continueNumberShow = false;
        this.continueMoneyShow = false;
        this.startNumber = this.transFormData.freightRuleListStr[index].freightRuleNum;
        setTimeout(()=>{
          this.$refs['trDom'][index].childNodes[6].childNodes["0"].childNodes["2"].select();
        },200)
      },

      //起算量（输入框）失去焦点
      blur_startNumber_btn(item,index){
        if(this.startNumber <= 0 || this.startNumber > 999999){
          this.startNumber = 1;
          this.Public.openError(this,'请输入1-999999之间的正整数')
        }
        this.transFormData.freightRuleListStr[index].freightRuleNum =  this.startNumber;
        this.startNumberShow = false;
      },

      //单选（切换）计价方式
      radio_freightPricingType_btn(){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认切换',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '切换计价方式后，所设置当前模板的运输信息将被清空，确定继续么？'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            if(this.transFormData.freightPricingType == 0){
              this.vue_freightPricingType = '按件数';
            }else if(this.transFormData.freightPricingType == 1){
              this.vue_freightPricingType = '按重量';
            }else if(this.transFormData.freightPricingType == 2){
              this.vue_freightPricingType = '按体积';
            }
            this.transFormData.freightRuleListStr.splice(1,this.transFormData.freightRuleListStr.length-1);
          }
        }).catch(() => {
          this.transFormData.freightPricingType = this.vue_oldVal;
        });
      },

      //单选（切换）卖家承担运费
      radio_seller_btn(val){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认切换',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '选择“卖家承担运费”后，所有区域的运费将设置为0元且原运费设置无法恢复，请保存原有运费设置。'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm') {
            this.tableShow = false;
          }
        }).catch(() => {
          this.tableShow = true;
          this.transFormData.freightFreepost = 0;
        });
      },

      //单选（切换）买家承担运费
      radio_buyer_btn(val){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认切换',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 14px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '您的运费设置将变为通用状态，请设置运费。'),
            ],
          ),
          customClass: "surePay clearfixBox",
          cancelButtonClass: 'fr',
          confirmButtonClass: 'fr',
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(action => {
          if (action === 'confirm'){
            this.tableShow = true;
          }
        }).catch(() => {
          this.tableShow = false;
          this.transFormData.freightFreepost = 1;
        });
      },

      //（点击）加号按钮
      addTr(){
        this.transFormData.freightRuleListStr.push({freightRuleName:"请选择地区",freightRuleNum:"999999",freightRuleMoney:0,freightRuleCnum:"999999",freightRuleCmoney:0})
      },

      //获取地区data
      query_areaDataArr(){
        this.vue_area_valueArr = companyMsgDatas.areaDataList;
      },

      //商品地区（改变时）触发
      vue_areaChange(val){
        switch(val.length){
          case 1:
            this.vue_area_valueArr.forEach((item,index,arr)=>{
              if(val[0] == item.treeCode){
                this.transFormData.areaName=item.treeName;
                return;
              }
            });
            break;
          case 2:
            this.vue_area_valueArr.forEach((item,index,arr)=>{
              if(val[0] == item.treeCode){
                this.transFormData.areaName=item.treeName;
                item.children.forEach((item1,index2,arr2)=>{
                  if(val[1]==item1.treeCode){
                    this.transFormData.areaName+="/"+item1.treeName;
                  }
                })
              }
            });
            break;
          case 3:
            this.vue_area_valueArr.forEach((item,index,arr)=>{
              if(val[0] == item.treeCode){
                this.transFormData.areaName=item.treeName;
                item.children.forEach((item1,index1,arr1)=>{
                  if(val[1]==item1.treeCode){
                    this.transFormData.areaName+="/"+item1.treeName;
                    item1.children.forEach((item2,index2,arr2)=>{
                      if(val[2]==item2.treeCode){
                        this.transFormData.areaName+="/"+item2.treeName;
                      }
                    })
                  }
                })
              }
            });
            break;
          case 4:
            this.vue_area_valueArr.forEach((item,index,arr)=>{
              if(val[0] == item.treeCode){
                this.transFormData.areaName=item.treeName;
                item.children.forEach((item1,index1,arr1)=>{
                  if(val[1]==item1.treeCode){
                    this.transFormData.areaName+="/"+item1.treeName;
                    item1.children.forEach((item2,index2,arr2)=>{
                      if(val[2]==item2.treeCode){
                        this.transFormData.areaName+="/"+item2.treeName;
                        item2.children.forEach((item3,index3,arr3)=>{
                          if(val[3]==item3.treeCode){
                            this.transFormData.areaName+="/"+item3.treeName;
                          }
                        })
                      }
                    })
                  }
                })
              }
            });
            break;
        }
      },

      //获取发货时间段
      queryTime(){
        this.axios({
          method:"POST",
          url:"/v3/basic/ddlists/00100000006/listAll",
          data:{},
        }).then((res) =>{
          this.vue_deliveryTime = res.data.list;
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },

      //获取运输方式
      queryTransType(){
        this.axios({
          method:"POST",
          url:"/v3/system/ddlists/00100000218/queryAllSystemDdlist",
          data:{},
        }).then((res) =>{
          this.vue_freightShipType = res.data.list;
        }).catch((err) =>{
          this.Public.openError(this,err.response.data)
        });
      },

    },

    created(){
      this.queryInfo();   //初始化页面数据
      this.query_areaDataArr();  //请求地区data
      this.queryTime();    //获取（下拉）时间
      this.queryTransType();   //获取（下拉）运输方式
    },

    mounted(){
      // 设置窗口高度 start
      var winHieg = document.documentElement.clientHeight;
      var cont = document.getElementById("content");
      cont.style.height = winHieg - 190 + "px";
    },

  }
</script>
<style scoped>

  .transColor{
    color: #42ccdc;
    cursor: pointer;
    display: inline!important;
  }

  .transColor:hover{
    text-decoration: underline;
    color: #36a8ba!important;
  }

  .notEnough{
    display: block;
    color: #999999;
    font-size: 12px!important;
    font-weight: normal!important;
  }

  .addOrReduce i{
    margin: 0 2px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
  }

  .addOrReduce i:hover{
    color: #13C19F;
  }

  .trans-table tr td span{
    display: block;
    cursor:pointer ;
  }

  .trans-table tr td{
    padding: 1px 0;
    line-height: 37px;
    border-top: 1px #dddddd solid;
    text-align: center;
    border-right: 1px #dddddd solid;
  }

  .trans-table tr:first-child{
    background: #eef1f9;
  }

  .trans-table tr:first-child th{
    padding: 10px 0;
  }

  .trans-table tr:first-child th:nth-child(1){
    width: 3%;
  }

  .trans-table tr:first-child th:nth-child(2){
    width: 6%;
  }

  .trans-table tr:first-child th:nth-child(3){
    width: 49%;
  }

  .trans-table tr:first-child th:nth-child(4){
    width: 15%;
  }
  .trans-table tr:first-child th:nth-child(5){
    width: 9%;
  }
  .trans-table tr:first-child th:nth-child(6){
    width: 9%;
  }
  .trans-table tr:first-child th:nth-child(7){
    width: 9%;
  }

  .trans-table tr:first-child th{
    border-right: 1px #dddddd solid;
  }

  .trans-table{
    width: 100%;
    border:1px #dddddd solid;
    border-right: 0;
  }

  .trans-box{
    margin: 10px 0;
  }


  .queren{
    position: fixed;
    bottom: 0px;
    margin-left: -15px;
    width: 87%;
    background: #fff;
    height: 80px;
    z-index: 10;
  }

  .queren a{
    display: inline-block;
    height: 34px;
    line-height: 34px;
    background: #fff!important;
    border: 1px solid #cdd9e6 ;
    color: #666!important;
    width: 86px;
    border-radius:20px;
    text-align: center;
    margin: 20px 20px 0px 10px;
    box-sizing: border-box;
  }
  .queren .baocun{
    color: #fff!important;
    background: #13C19F!important;
    z-index: 100;
    cursor: pointer;
    border: 0;
    margin-left: 30px;
  }


  .yellowColor{
    color: #ff7636!important;
    margin-left: 6px;
  }

  .yellowColor b{
    font-weight: normal;
    margin-left: 10px;
  }

  .trans-tip{
    line-height: 36px;
    margin-left: 6px;
    color: #999999;
  }

  .selectWidth {
    width: 100%;
  }

  .location{
    padding: 3px 0 15px 0;
  }

  .content{
    background: #fff;
    padding: 15px;
    overflow-y: auto;
    font-family: "微软雅黑";
    position: relative;
  }
</style>
